<template>
  <view>
    <u-navbar title="修改手机号" back-icon-size="34" title-size="36" :border-bottom="false" :background="background" title-color="#222" back-icon-color="#222"></u-navbar>
    <view class="" style="margin: 28rpx 0; box-shadow: 0px 0px 10rpx 0px rgba(70, 70, 70, 0.05); border-radius: 20rpx; background: #fff; padding-bottom: 32rpx">
      <view class="" style="display: flex; align-items: center; padding: 41rpx 40rpx">
        <text>原手机号</text>
        <text style="padding-left: 39rpx">{{ userinfo.mobile }}</text>
      </view>
      <view class="" style="display: flex; align-items: center; padding: 0rpx 40rpx">
        <text>新手机号</text>
        <input type="number" style="height: 90rpx; border-radius: 28rpx; padding-left: 36rpx; font-size: 28rpx; width: 300rpx" placeholder="请输入手机号" v-model="mobile" />
        <view class="" style="font-size: 28rpx; color: #0fb8ff; padding-right: 41rpx" @tap="yzm">
          {{ BtnText }}
        </view>
      </view>
      <view class="" style="display: flex; align-items: center; padding: 10rpx 40rpx">
        <text>验证码</text>
        <input type="number" style="height: 90rpx; padding-left: 68rpx; font-size: 28rpx; border-radius: 28rpx" placeholder="请输入验证码" v-model="code" />
      </view>
    </view>

    <view class="" style="width: 100%; height: 200rpx; background: #fff; position: fixed; bottom: 0">
      <view class="btn" @tap="change">保存</view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      background: {
        background: '#fff'
      },
      BtnText: '获取验证码',
      second: 60,
      code: '',
      mobile: '',
      userinfo: {}
    };
  },
  methods: {
    yzm() {
      if (this.mobile.length != 11) {
        uni.showToast({
          icon: 'none',
          title: '手机号不正确'
        });
        return;
      }
      if (this.BtnText == '获取验证码') {
        this.fasong();

        var interval = setInterval(() => {
          this.BtnText = this.second + 's 重新获取';

          this.second--; //在data中定义second倒计时的时间

          if (this.second == 0) {
            clearInterval(interval);

            this.second = 60;

            this.BtnText = '获取验证码';
          }
        }, 1000);
      }
    },
    fasong() {
      this.api({
        url: '/api/sms/send',
        method: 'post',
        data: {
          mobile: this.mobile
        }
      }).then((data) => {
        uni.showToast({
          title: data.msg,
          icon: 'none'
        });
      });
    },
    change() {
      if (this.mobile == '') {
        uni.showToast({
          title: '请输入手机号',
          icon: 'none'
        });
      } else if (this.code == '') {
        uni.showToast({
          title: '请输入验证码',
          icon: 'none'
        });
      } else {
        this.api({
          url: '/api/user/changemobile',
          method: 'post',
          data: {
            mobile: this.mobile,
            captcha: this.code
          }
        }).then((res) => {
          uni.showToast({
            title: res.msg,
            icon: 'none'
          });
          setTimeout(function () {
            uni.navigateBack();
          }, 1000);
        });
      }
    },
    user() {
      this.api({
        url: '/api/user/index',
        method: 'post'
      }).then((res) => {
        this.userinfo = res.data;
      });
    }
  },
  onShow() {
    this.user();
  }
};
</script>

<style>
page {
  background: #f8f8f8;
}

.btn {
  margin: 60rpx 110rpx;
  height: 80rpx;
  background: linear-gradient(180deg, #1a9eff, #0fb8ff);
  border-radius: 40rpx;
  text-align: center;
  line-height: 80rpx;
  color: #fff;
  font-size: 32rpx;
}
</style>
